<template>
	<div id="collection">
		<van-nav-bar fixed style="z-index:1000">
			<div slot="title">
				收藏
			</div>
      <van-icon name="arrow-left" slot="left" color="black" @click="$router.go(-1)"/>
      <div slot="right" @click="onClickRight">
        {{actionTitle}}
      </div>
		</van-nav-bar>
		<div id="container" >
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :offset="100"
        :immediate-check="false"
      >
			  <div class="list">
          <div class="good-list" v-bind:class="{ good_action: action }" v-for="(item,k) in list" >
            <img :src="item.commodityPicture"/>
            <div>
              <span>{{item.commodityName}}</span>
              <div><span>￥{{item.commodityPrice}}</span><span>原价 <del>￥17.90</del></span></div>
              <div class="lq">
                <div><img src="/static/img/lq.png"/><span>领券  7元</span></div>
                <span>已售{{item.sales}}万</span>
              </div>
              <div class="yg">
                <div>预估赚￥5.20</div>
                <div>升级赚￥5.20</div>
              </div>
            </div>
            <div class="check">
            	<van-checkbox v-model="isCheck[k]" v-if="checkShow" checked-color="#ff5555"></van-checkbox>
            </div>
          </div>
      </div>
        <div class="error" style="background-color:red;color:white;padding: 0.2rem" @click="reload" v-if="isReload">加载失败！点击重新加载</div>
      </van-list>
		</div>

		<van-submit-bar
		  button-text="删除"
      class="sub_bar"
      v-if="checkShow"
      @submit="onDelete"
		>
		<van-checkbox v-model="c"  style="margin-left:10px" checked-color="#ff5555">全选</van-checkbox>
		</van-submit-bar>

		
	</div>
</template>

<script>
    export default {
        name: "collection",
        data() {
        	return {
        		c:false,
            checkShow:false,
            actionTitle:'编辑',
            action: false,
            pageNum:1,
            pageSize: 10,
            list:[],
            loading:false,
            finished:false,
            uid:'2018Xg10258s14384g38',
            isReload:false,
            isCheck:[],
        	}
        },
        methods: {
          onClickLeft() {
            // this.$toast('返回');
          },
          onClickRight() {
            // this.$toast('完成');
            this.checkShow=!this.checkShow;
            this.actionTitle=this.checkShow===false?'编辑':'完成';
            this.action=this.checkShow===false?false:true;
          },
          selAllCollectById(uid,pageNum,pageSize,isShow=true){
            var params = new URLSearchParams();
            params.append('pageSize', pageSize);       //你要传给后台的参数值 key/value
            params.append('pageNum', pageNum);
            params.append('uid', uid);
            this.$POST('/collect/selAllCollectById',params,isShow).then(res =>{
              console.log(res);
              if(res.meta.code===200){
                if(res.data.length>0){
                  this.list=this.list.concat(res.data);
                  for(let i=this.isCheck.length;i<this.list.length;i++){
                    this.isCheck[i]=false;
                  }
                  if(res.data.length<this.pageSize){
                    this.finished=true;
                    this.$toast("到底了亲！");
                  }
                }else{
                  this.finished=true;
                  this.$toast("到底了亲!");
                }
              }
              this.loading=false;
              console.log("加载数据成功!");
            }).catch(res=>{
              this.loading=false;
              this.finished=true;
              this.pageNum--;
              this.isReload=true;
              console.log("获取数据失败!");
            })
          },
          onLoad(){
            this.loading=true;
            console.log("开始加载数据");
            this.pageNum++;
            this.selAllCollectById(this.uid,this.pageNum,this.pageSize,false);
          },
          reload(){
            this.isReload=false;
            this.finished=false;
          },
          onDelete(){
            this.isCheck.forEach((value,index)=>{
              if(value===true){
                console.log(this.list[index].id);
                this.delCollectById(this.list[index].id);
              }
            })
          },
          delCollectById(id){
            var params = new URLSearchParams();
            params.append('id', id);
            this.$POST('/collect/delCollectById',params,false).then(res =>{
              console.log(res);
              if(res.meta.code===200) {
                console.log("删除收藏成功!");
              }
            }).catch(res=>{
               console.log("删除收藏失败!");
            })
          }
        },
        created() {
          this.selAllCollectById(this.uid,this.pageNum,this.pageSize);
        },
        watch:{
          c:function(val){
            this.isCheck.forEach((value,index,array)=>{
              if(val){
                this.isCheck[index]=true;
              }else{
                this.isCheck[index]=false;
              }
            })
          }
        }
    }
</script>

<style scoped>

  #collection{
  	font-size: 1rem;
  	background-color: #eeeeee;
  }
 
 #container{
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
  z-index: 999;
  margin-top: 40px;
 }
  .check{
	position: absolute;
	left: 0.5rem;
	top: 2.5rem;
	z-index: 10;
  }
  .good-list{
    width: 95%;
    text-align: left;
    margin: 0 auto;
    margin-bottom: 10px;
    background-color: #ffffff;
    position: relative;
    z-index: 1;
    padding: 0.5rem;
    transition:padding-left 0.3s;
  }
  
  .good_action{
    padding-left: 3rem;
  }

  .good-list:after{
    clear:both;
    content:'';
    display:block;
    width:0;
    height:0;
    visibility:hidden;
  }
  .list:after{
    clear:both;
    content:'';
    display:block;
    width:0;
    height:0;
    visibility:hidden;
  }
  .good-list>img{
    float: left;
    width: 50%;
  }
  .good-list>div{
    width: 48%;
    float: left;
    text-align:left;
    margin-left:2%;
  }
  .good-list>div>span{
    font-family: 黑体;
    font-size: 18px;
    font-weight: bold;
  }
  .good-list>div>div>span:first-child {
    font-size: 20px;
    color:#e12532;
  }
  .good-list>div>div>span:last-child{
    font-size: 13px;
    float:right;
    line-height: 26px;
    color: #a8a9a9;
  }
  .good-list>div>div{
    margin-top: 15px;
  }
  .good-list>div>div:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }
   .lq{
    width: 100%;
  }
  .lq:after{
    clear:both;
    content:'';
    display:block;
    width:0;
    height:0;
    visibility:hidden;
  }
  .lq>div{
    width: 40%;
    position: relative;
  }
  .lq>div:first-child{
    float: left;
    height:30px;
  }
  .lq>div>img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
  }
  .lq>div>span{
    z-index: 1;
    text-align: right;
    line-height:25px;
    position: absolute;
    right:5px;
    color: #ffffff;
    font-size: 14px;
  }
  .yg{
    width: 100%;
    font-size: 12px;
  }
  .yg>div:first-child{
    float: left;
    padding: 2px 5px;
    background: #ffdcdc;
    color: #e12532;
    border-radius:7px;
  }
  .yg>div:last-child{
    float: right;
    padding: 2px 5px;
    background: linear-gradient(to right,#ff722d, #ff4b26 , #ff2820); /* 标准的语法 */
    border-radius:7px;
    color: #ffffff;
  }
  .list{
    margin-top: 10px;
  }
</style>
